<template>
    <div 
    v-if="!loadAll"
    class="btn-loadmore" 
    @click="load"
    >
        <slot>
            <i class="el-icon-loading" v-if="loading"></i>
            {{text}}
        </slot>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Array,
            default: () => [],
        },
        search: {
            type: Object,
            default: () => ({
                sortorder: 'desc',
                sortname: '',
            }),
        },
        action: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            pageIndex: 0,
            pagesize: 10,

            text: '加载更多',
            loading: false,
            loadAll: false,
        };
    },
    computed: {
        model: {
            get() {
                return this.value || [];
            },
            set(val) {
                this.$emit('input', val);
            },
        }
    },
    watch: {
        loading(val) {
            this.$emit('update:loading', val);
        },
    },
    methods: {
        load() {
            this.loadAll = true;

            this.search.size = '';

            this.queryData(data => {
                // var tableData = this.model;

                // this.model = [...tableData, ...data];
                this.model = data;
            });
        },
        reload() {
            this.loadAll = false;

            this.queryData(data => {
                this.model = data;

                if (data && data.length === this.search.size) {
                    // 恰好相同

                    this.$get(this.action, {
                        ...this.search,
                        size: '',
                    }, data => {
                        if (data && data.length === this.search.size) {
                            this.loadAll = true;
                        }
                    });
                }

                if (data && data.length < this.search.size) {
                    this.loadAll = true;
                }
            });
        },
        queryData(cb) {
            if (!this.action) return;

            this.loadingStart();

            var search = {
                ...this.search,
            };

            this.$get(this.action, search, data => {
                var rows = data || [];

                cb && cb(rows);

                this.loadingEnd();
            });
        },
        loadingStart() {
            this.text = '加载中...';
            this.loading = true;
        },
        loadingEnd() {
            this.text = '加载更多';
            this.loading = false;
        },
        // 供外部调用的重新加载
        outerReload() {
            if (this.loadAll) {
                this.load();

                return;
            }

            this.reload();
        },
    },
    mounted() {
        this.reload();
    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .btn-loadmore{
        color: $primaryColor;
        font-size: 14px;
        line-height: 1em;
        text-align: center;
        cursor: pointer;
        margin-top: 30px;

        &:hover{
            color: $primaryColor8;
        }
    }
</style>